<template>
    <div class="app-container">
        <div class="filter-container">
          <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="推荐人会员卡号"
                v-model="queryParams.recommenderVirtualcard"
            ></el-input>
            <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="推荐人手机号"
                v-model="queryParams.recommenderTelephone"
            ></el-input>
            <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="被推荐人会员卡号"
                v-model="queryParams.userVirtualcard"
            ></el-input>
            <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="被推荐人手机号"
                v-model="queryParams.userTelephone"
            ></el-input>
            <el-select
          style="width: 200px;"
          size="small"
          clearable
          class="filter-item"
          placeholder="状态"
          v-model="queryParams.status"
        >
          <el-option
            v-for="(item,itemIndex) in statusOptions"
            :key="itemIndex"
            :label="item"
            :value="itemIndex"
          ></el-option>
        </el-select>

            <el-button
                class="filter-item"
                type="primary"
                size="small"
                v-waves
                icon="el-icon-search"
                @click="loadData"
            >搜索</el-button>
             <el-button
            type="primary"
            @click="handleExport"
            v-perm="'recommend_share:detail-recommend-export'"
            :loading="downloadLoading"
            icon="el-icon-download"
            size="small"
          >导出</el-button>
        </div>
        <el-table
            :data="dataList"
            :height="tableHeight"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            border=""
            fit
            highlight-current-row
            style="width: 100%"
        >
            <el-table-column align="center" prop="recommenderVirtualcard" label="推荐人会员卡号" width="160"></el-table-column>
            <el-table-column align="center" prop="recommenderTelephone" label="推荐人手机号" width="160"></el-table-column>
            <el-table-column align="center" prop="userVirtualcard" label="被推荐人会员卡号" width="160"></el-table-column>
            <el-table-column align="center" prop="userTelephone" label="被推荐人手机号" width="160"></el-table-column>
            <el-table-column align="center" prop="createTime" label="推荐时间" width="160"></el-table-column>
            <el-table-column align="center" prop="status" label="状态" width="160">
                <template slot-scope="scope">
                    <div>{{scope.row.status|statusFilter}}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="usedTime" label="注册完成时间" width="160"></el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                background=""
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="queryParams.pageNo"
                :page-sizes="[10,20,30,50]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
            ></el-pagination>
        </div>
        <el-dialog title="详情" :visible.sync="isCurrentUserLevelShowed">
            <div class="title">{{formData.title}}</div>
            <div class="content">
                <div v-html="formData.content"></div>
            </div>
        </el-dialog>
        <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="isFormDialogShowed" width="1000px">
            <el-form
                class="dialog-form"
                :rules="formRules"
                ref="dataForm"
                :model="formData"
                label-position="left"
                label-width="120px"
            >
                <el-form-item label="推荐人" prop="recommenderId">
                    <el-input v-model="formData.recommenderId" maxlength="50" placeholder="请输入推荐人"></el-input>
                </el-form-item>
                <el-form-item label="被推荐人" prop="userId">
                    <el-input v-model="formData.userId" maxlength="50" placeholder="请输入被推荐人"></el-input>
                </el-form-item>
                <el-form-item label="推荐时间" prop="createTime">
                    <el-input v-model="formData.createTime" maxlength="50" placeholder="请输入推荐时间"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-input v-model="formData.status" maxlength="50" placeholder="请输入状态"></el-input>
                </el-form-item>
                <el-form-item label="提交完成时间" prop="usedTime">
                    <el-input v-model="formData.usedTime" maxlength="50" placeholder="请输入提交完成时间"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isFormDialogShowed = false">取消</el-button>
                <el-button type="primary" :loading="isSubmiting" @click="handleSubmitForm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
const statusOptions = [
  '待注册',
  '已注册'
]
export default {
  name: 'index',
  data () {
    return {
      statusOptions,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      formRules: {
        recommenderId: [
          {
            required: true,
            message: '请输入推荐人'
          }
        ],
        userId: [
          {
            required: true,
            message: '请输入被推荐人'
          }
        ],
        createTime: [
          {
            required: true,
            message: '请输入推荐时间'
          }
        ],
        status: [
          {
            required: true,
            message: '请输入状态'
          }
        ],
        usedTime: [
          {
            required: true,
            message: '请输入提交完成时间'
          }
        ]
      },

      formData: {},
      isSubmiting: false,
      isFormDialogShowed: false,
      isCurrentUserLevelShowed: false,
      dataList: [],
      dataTotal: 0,
      isEditing: false,
      tableHeight: 300
    }
  },
  filters: {
    statusFilter (v) {
      return statusOptions[v]
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 300
    this.loadData()
  },
  methods: {
    handleRemove (row) {
      this.$$comfirm('确认删除该记录吗', _ => {
        this.$post('/admin/recommend_user_log/remove', { id: row.id }).then(
          _ => {
            this.$$notify()
            this.loadData()
          }
        )
      })
    },
    handleAdd () {
      this.isFormDialogShowed = true
      this.formData = {}
      this.isEditing = false
    },
    handleViewNote (row) {
      this.formData = row
      this.isCurrentUserLevelShowed = true
    },
    handleAvatarSuccess (imgField) {
      return (res, file) => {
        if (res && res.errcode == 0) {
          this.formData[imgField] = res.info
        }
      }
    },
    handleEdit (row) {
      this.isFormDialogShowed = true
      this.isEditing = true
      this.formData = Object.assign({}, row)
    },
    handleCurrentChange (pageNo) {
      this.queryParams.pageNo = pageNo
      this.loadData()
    },
    handleSizeChange (pageSize) {
      this.queryParams.pageSize = pageSize
      this.loadData()
    },
    handleSubmitForm () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.isSubmiting = true
          this.$post(
            this.isEditing
              ? '/admin/recommend_user_log/update'
              : '/admin/recommend_user_log/create',
            this.formData
          )
            .then(() => {
              this.loadData()
              this.isFormDialogShowed = false
              this.$$notify()
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    handleExport () {
      this.downloadLoading = true
      this.$get('/admin/recommend_user_log/list',
        {
          pageNo: 1,
          pageSize: 4000,
          ...this.queryParams
        })
        .then(res => {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['推荐人会员卡号', '推荐人手机号', '被推荐人会员卡号', '被推荐人手机号', '推荐时间', '状态', '注册完成时间']
            const filterVal = ['recommenderVirtualcard', 'recommenderTelephone', 'userVirtualcard', 'userTelephone', 'createTime', 'status', 'usedTime']
            const data = this.formatJson(filterVal, res.rows)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '推荐明细'
            })
            this.downloadLoading = false
          })
        })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'status') {
            return statusOptions[v[j]]
          }
          return v[j]
        })
      )
    },
    loadData () {
      this.listLoading = true
      this.$get('/admin/recommend_user_log/list', this.queryParams)
        .then(data => {
          this.dataList = data.rows || []
          this.dataTotal = data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

  <style scoped lang="scss">
.title {
  text-align: center;
  padding: 0 0 20px 0;
  font-size: 20px;
}

.content {
  line-height: 2;
}
</style>
